<!--数据表格-->
<template>
  <div>
    <el-card class="member-box-card">
      <el-table id="member-table" ref="memberTable" :key="itemKey" v-loading="loading" stripe border height="700" style="width: 100%" :data="tableData">
        <el-table-column
          prop="id"
          label="序号"
        />
        <el-table-column
          property="deadline"
          label="截止日期"
        />
        <el-table-column align="right">
          <template slot="header" slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleInsert(scope.$index, scope.row)"
            >添加</el-button>
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--编辑弹窗-->
    <el-dialog title="修改信息" :visible.sync="editFormVisible" :before-close="handleEditClose" width="50%">
      <el-form class="action-form" :model="updForm" label-width="100px">
        <el-form-item label="序号">
          <el-input :placeholder="updForm.id" :disabled="true" />
        </el-form-item>
        <el-form-item label="截止日期">
          <el-input v-model="updForm.deadline" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updFormCancel()">取 消</el-button>
        <el-button type="primary" @click="updFormConfirm()">确 定</el-button>
      </div>
    </el-dialog>
    <!--添加弹窗-->
    <el-dialog title="添加采购计划截止日期" :visible.sync="insFormVisible" :before-close="handleInsClose" width="50%">
      <el-form class="action-form" :model="insForm" label-width="140px">
        <el-form-item label="输入新的截止日期">
          <el-input v-model="insForm.deadline" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="insFormCancel()">取 消</el-button>
        <el-button type="primary" @click="insFormConfirm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { insertPlanDeadline, selectAll, updatePlanDeadline } from '@/api/system-management/deadline-management'
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      tableData: [],
      editFormVisible: false,
      insFormVisible: false,
      search: '',
      itemKey: '',
      loading: false,
      updForm: {
        id: '',
        index: '',
        deadline: ''
      },
      insForm: {
        deadline: ''
      },
      headers: {
        Authorization: getToken()
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      selectAll().then((response) => {
        // console.log(response.data.deadline)
        this.tableData.push(response.data)
      })
    },
    handleEdit(index, row) {
      this.editFormVisible = true
      this.updForm.index = index
      this.updForm.id = this.tableData[index].id
      this.updForm.deadline = row.deadline
    },
    updFormConfirm() {
      this.editFormVisible = false
      updatePlanDeadline(
        this.updForm.deadline,
        this.updForm.id
      ).then((response) => {
        this.$message.success(response.message)
        this.loading = true
        selectAll().then((response) => {
          this.tableData = []
          this.tableData.push(response.data)
          this.loading = false
          this.itemKey = Math.random()
        })
        this.updForm.deadline = ''
      }).catch((error) => {
        console.log(error)
      })
    },
    updFormCancel() {
      this.updForm.deadline = ''
    },
    handleEditClose() {
      this.editFormVisible = false
      this.updForm.deadline = ''
    },
    handleInsert(index, row) {
      this.insFormVisible = true
    },
    insFormConfirm() {
      if (this.insForm.deadline === '' || parseInt(this.insForm.deadline) > 31 || parseInt(this.insForm.deadline) < 1) {
        this.$message.error('信息有误,请重新输入')
      } else {
        insertPlanDeadline(this.insForm.deadline).then(response => {
          this.$message.success(response.message)
          this.insFormVisible = false
          this.loading = true
          selectAll().then((response) => {
            this.tableData = []
            this.tableData.push(response.data)
            this.loading = false
            this.itemKey = Math.random()
          })
          this.insForm.deadline = ''
        })
      }
    },
    insFormCancel() {
      this.insFormVisible = false
      this.insForm.deadline = ''
    },
    handleInsClose() {
      this.insFormVisible = false
      this.insForm.deadline = ''
    }
  }
}
</script>

<style>
.member-box-card {
  width: 95%;
  margin: 20px auto;
}
#input-field {
  width: 200px;
  display: inline;
}
#member-table {
  margin-top: 5px;
}
.action-form {
  width: 400px;
}
</style>
